<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri = "http://java.sun.com/jsp/jstl/core" prefix = "c" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/main.css">
    <title>详情</title>
</head>
<body>

    <div class="container-fluid" style="padding-left: 0px; padding-right: 0px;">
        <div class="row no-gutters my-header">
            <div class="col-4 logo">
                <a href="index.jsp">
                    <img src="images/logo.png" height="32px"/>
                </a>
            </div>
            <div class="col-2"></div>
            <div class="col-2 my-icon">
                <a href="profile.jsp" >
                    <svg class="my-svg" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M15,12H9a5,5,0,0,0-5,5v4H20V17A5,5,0,0,0,15,12Zm3,7H6V17a3,3,0,0,1,3-3h6a3,3,0,0,1,3,3Zm-6-8A4,4,0,1,0,8,7,4,4,0,0,0,12,11Zm0-6a2,2,0,1,1-2,2A2,2,0,0,1,12,5Z"></path></svg>
                </a>
            </div>
            <div class="col-2 my-icon">
                <a href="history">
                    <svg class="my-svg" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M16,14l2-2V22H2V2H16L14,4H4V20H16ZM12,6H6V8h6ZM6,12H8V10H6Zm-.23,6.29,4.66-2.05L22,4.66,19.34,2,7.72,13.73Z"></path></svg>
                </a>
            </div>
            <div class="col-2 my-icon">
                <svg class="my-svg" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M16.677 10l-1.245-3.114L12.646 5h-1.292L8.568 6.886 7.323 10H2l2.544 7.633A2 2 0 0 0 6.441 19h11.117a2 2 0 0 0 1.898-1.368L22 10zm-6-3h2.646l1.2 3H9.477zm6.881 10H6.441l-1.666-5h14.45z"></path></svg>
            </div>
        </div>
    </div>
    <div class="release-title">详情</div>

    <div class="release-result">
        已签到 <span style="font-size: 20px;">${applicationScope.has_clockined_num}</span> / ${applicationScope.studentsNum}
    </div>
    <div class="hassignined" style="background-color: #ffffff">
        <div style="height: 30px;">
            暂无签到 &nbsp;
            <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-emoji-smile" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
                <path fill-rule="evenodd" d="M4.285 9.567a.5.5 0 0 1 .683.183A3.498 3.498 0 0 0 8 11.5a3.498 3.498 0 0 0 3.032-1.75.5.5 0 1 1 .866.5A4.498 4.498 0 0 1 8 12.5a4.498 4.498 0 0 1-3.898-2.25.5.5 0 0 1 .183-.683z"/>
                <path d="M7 6.5C7 7.328 6.552 8 6 8s-1-.672-1-1.5S5.448 5 6 5s1 .672 1 1.5zm4 0c0 .828-.448 1.5-1 1.5s-1-.672-1-1.5S9.448 5 10 5s1 .672 1 1.5z"/>
            </svg>
        </div>
    </div>
    <div class="release-details">

        <c:forEach  items="${applicationScope.resultList}" var="result">
            <div class="datail-info">
                <div class="release-header">
                    <div class="person-icon" style="padding-left: 10px">
                        <svg class="my-svg" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M15,12H9a5,5,0,0,0-5,5v4H20V17A5,5,0,0,0,15,12Zm3,7H6V17a3,3,0,0,1,3-3h6a3,3,0,0,1,3,3Zm-6-8A4,4,0,1,0,8,7,4,4,0,0,0,12,11Zm0-6a2,2,0,1,1-2,2A2,2,0,0,1,12,5Z"></path></svg>
                    </div>
                    <div class="person-name">${result.name}</div>
                    <div class="signin-time">${result.signinTime}</div>
                </div>
                <div class="stu-base">${result.gender} &emsp; ${result.id} &emsp; ${result.clazz}</div>
                <div class="stu-address">
                    <div class="result-icon" >
                        <svg width="1em" height="1em" style="font-size: 16px;" viewBox="0 0 16 16" class="bi bi-geo" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                            <path d="M11 4a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"/>
                            <path d="M7.5 4h1v9a.5.5 0 0 1-1 0V4z"/>
                            <path fill-rule="evenodd" d="M6.489 12.095a.5.5 0 0 1-.383.594c-.565.123-1.003.292-1.286.472-.302.192-.32.321-.32.339 0 .013.005.085.146.21.14.124.372.26.701.382.655.246 1.593.408 2.653.408s1.998-.162 2.653-.408c.329-.123.56-.258.701-.382.14-.125.146-.197.146-.21 0-.018-.018-.147-.32-.339-.283-.18-.721-.35-1.286-.472a.5.5 0 1 1 .212-.977c.63.137 1.193.34 1.61.606.4.253.784.645.784 1.182 0 .402-.219.724-.483.958-.264.235-.618.423-1.013.57-.793.298-1.855.472-3.004.472s-2.21-.174-3.004-.471c-.395-.148-.749-.336-1.013-.571-.264-.234-.483-.556-.483-.958 0-.537.384-.929.783-1.182.418-.266.98-.47 1.611-.606a.5.5 0 0 1 .595.383z"/>
                        </svg>
                    </div>
                    <div class="result">${result.address}</div>
                    <div class="result-judge-ok address-1" style="display: none;"><span style="color: #fa9a1e;">✓</span>&nbsp;${result.addressDescription}</div>
                    <div class="result-judge-worse address-0" style="display: none;">
                        <div class="redhint">${result.addressDescription}</div>
                    </div>
                    <div class="judge1" style="display: none">${result.addressJudge}</div>
                </div>
                <div class="body-temperature">
                    <div class="result-icon">
                        <svg t="1593398296214" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2381" width="16" height="16"><path d="M652.502326 597.730233a2.857674 2.857674 0 0 1 0-2.143256V129.309767a121.213023 121.213023 0 0 0-242.187907 0V595.348837a2.857674 2.857674 0 0 1-1.190698 2.143256A219.802791 219.802791 0 0 0 516.048372 1000.186047h14.526512a218.135814 218.135814 0 0 0 150.266046-59.534884 219.802791 219.802791 0 0 0-28.338604-342.92093z m-2.381396 309.581395a173.127442 173.127442 0 0 1-131.214883 47.627907 175.032558 175.032558 0 0 1-85.968373-320.297675 47.627907 47.627907 0 0 0 20.956279-39.293023V129.309767a76.442791 76.442791 0 0 1 152.885582 0V595.348837a47.627907 47.627907 0 0 0 20.718139 39.293023 175.032558 175.032558 0 0 1 22.623256 273.146047z" p-id="2382"></path><path d="M602.969302 671.553488a91.445581 91.445581 0 0 1-40.483721-76.204651V340.301395a32.148837 32.148837 0 0 0-64.297674 0V595.348837a91.207442 91.207442 0 0 1-40.72186 75.966512 130.976744 130.976744 0 0 0 64.297674 239.568372h8.573023a130.976744 130.976744 0 0 0 72.632558-239.330233z" p-id="2383"></path></svg>
                    </div>
                    <div class="result">${result.temperature} ℃ </div>
                    <div class="result-judge-ok temperature-1" style="display: none;"><span style="color: #fa9a1e;">✓</span>&nbsp;${result.temperatureDescription}</div>
                    <div class="result-judge-worse temperature-0" style="display: none;">
                        <div class="redhint">${result.temperatureDescription}</div>
                    </div>
                    <div class="judge2" style="display: none">${result.temperatureJudge}</div>
                </div>
                <div class="stu-touch">
                    <div class="result-icon">
                        <svg width="1em" style="font-size: 16px;" height="1em" viewBox="0 0 16 16" class="bi bi-people" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                            <path fill-rule="evenodd" d="M15 14s1 0 1-1-1-4-5-4-5 3-5 4 1 1 1 1h8zm-7.995-.944v-.002.002zM7.022 13h7.956a.274.274 0 0 0 .014-.002l.008-.002c-.002-.264-.167-1.03-.76-1.72C13.688 10.629 12.718 10 11 10c-1.717 0-2.687.63-3.24 1.276-.593.69-.759 1.457-.76 1.72a1.05 1.05 0 0 0 .022.004zm7.973.056v-.002.002zM11 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm3-2a3 3 0 1 1-6 0 3 3 0 0 1 6 0zM6.936 9.28a5.88 5.88 0 0 0-1.23-.247A7.35 7.35 0 0 0 5 9c-4 0-5 3-5 4 0 .667.333 1 1 1h4.216A2.238 2.238 0 0 1 5 13c0-1.01.377-2.042 1.09-2.904.243-.294.526-.569.846-.816zM4.92 10c-1.668.02-2.615.64-3.16 1.276C1.163 11.97 1 12.739 1 13h3c0-1.045.323-2.086.92-3zM1.5 5.5a3 3 0 1 1 6 0 3 3 0 0 1-6 0zm3-2a2 2 0 1 0 0 4 2 2 0 0 0 0-4z"/>
                        </svg>
                    </div>
                    <div class="result">${result.contact}</div>
                    <div class="result-judge-ok"><span style="color: #fa9a1e;">✓</span>&nbsp; ${result.contactDescription}</div>
                </div>
            </div>
        </c:forEach>
    </div>

    <div style="display: none" id="clockin_num">${applicationScope.has_clockined_num}</div>


    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
    <script src="js/jquery-1.11.3.min.js"></script>
    <script>

        let rows = document.getElementsByClassName("datail-info")
        for(let i = 0; i < rows.length; i++){
            if( document.getElementsByClassName("judge1")[i].innerHTML == "1"){
                document.getElementsByClassName("address-1")[i].style.display = "block";
                document.getElementsByClassName("address-0")[i].style.display = "none";
            }else{
                document.getElementsByClassName("address-0")[i].style.display = "block";
                document.getElementsByClassName("address-1")[i].style.display = "none";
            }

            if(document.getElementsByClassName("judge2")[i].innerHTML == "1"){
                document.getElementsByClassName("temperature-1")[i].style.display = "block";
                document.getElementsByClassName("temperature-0")[i].style.display = "none";
            }else{
                document.getElementsByClassName("temperature-0")[i].style.display = "block";
                document.getElementsByClassName("temperature-1")[i].style.display = "none";
            }

        }

        let clockin_num = document.getElementById("clockin_num").innerHTML;
        if(clockin_num == "0"){
            document.getElementsByClassName("release-result")[0].style.display = "none"
            document.getElementsByClassName("hassignined")[0].style.display = "block"
        }else{
            document.getElementsByClassName("release-result")[0].style.display = "block"
            document.getElementsByClassName("hassignined")[0].style.display = "none"
        }


    </script>
</body>
</html>